<template>
  <div id="main" class="Echart" ref="chart" ></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
type EChartsOption = echarts.EChartsOption;
const chart = ref()
onMounted(() => {
  const myChart = echarts.init(chart.value)
  const data = [
    { value: 12, name: '火鸡面' },
    { value: 10, name: '方便面' },
    { value: 16, name: '卤猪蹄' },
    { value: 19, name: '大猪肘' },
  ]
  // 响应屏幕大小
  window.addEventListener('resize',()=>{
    myChart.resize()
  },false)

  let option = {
    title: {
      text: '后台管理数据',
      left: 'center'
    },
    tooltip: {},
    legend: {
      data: data,
      left: "left",
      orient: "verical"
    },
    series: [
      {
        name: '销量',
        type: 'pie', //表类型
        data: data,
        radius: ["40%", "70%"], //饼图半径
        avoidLabelOverlap: false,
        label: {
          Position: "inside",
        },
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 30,
            fontWeight: 'bold'
          }
        },
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
})

</script>

<style scoped>
.Echart {
  width: 100%;
  height: 100%;
}
</style>
